import './index.scss'
import { DotLoading } from 'antd-mobile'
import { useProblemList } from './useProblem'
import GeneralCard from '@/components/GeneralCard'
import Bread from '@/components/Bread'

type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}
const ProblemList = () => {
    // 逻辑业务
    const { headers, imgs, isLoading } = useProblemList()
    const breadNav: Item[] = [
      { id: 1, title: 'Service', link: '/support', classname: '' },
      { id: 2, title: headers?.title, link: `/problems/`, classname: 'active' },
    ]
    // UI 渲染
    return (
      <div>
        {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div> :
          <div className='content-box'>
            <Bread items={breadNav}/>
            {imgs.map((item) => (
                <GeneralCard 
                  title={item.title} 
                  key={item.id}
                  link={`/problems/detail/${item.id}`}
                  classname='Prob-display'/>
              ))}
          </div>
        }

      </div>
    )
  }
  
  export default ProblemList
  